/*
 * @Author: lusx 
 * @Date: 2020-04-15 10:26:11 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-22 13:44:52
 */
import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { SelfTab } from '../governTools/selfTab';
import Overview from './overview'
// import { ListPage, Tabs } from 'weaver-mobile-page';
import { ListPage, } from 'weaver-mobile-page';
import { Tabs, WhiteSpace } from 'weaver-mobile';
import { result2 } from './config';
import Header from './header'
import { withRouter, } from 'react-router-dom';
import MainListPage from '../main/pages/mainListPage.js'
const Normal = ListPage.Normal;
const template = {
    default: '<div style="padding: 0 10px">' +
        '<div style="color: #333;">#{title}   ' +
        '<span style="font-size: 9px;border: 1px solid #{statusColor} ;background-color: #{statusColor} ;border-radius: 3px;padding: 0px 2px;;color: #fff;right: 15px;position: absolute;top: 6px;" >#{status}</span></div>' +
        '<div style="color: #999;font-size:12px">责任人： #{peoper}</div>',
};

@withRouter
@inject('overviewStore')
@observer
class PanelBox extends React.Component {
    componentWillMount() {
        const { init, list } = this.props.overviewStore;
        init();
    }
    componentDidUpdate() {
        const { listView, list } = this.props.overviewStore;
        list.setState({
            data: listView.data.map((item, i) => ({
                title: item.mobileNamespan,
                peoper: item.mobileResponsiblespan,
                status: item.mobile_statusspan,
                statusColor: item.mobile_statusColorspan,
                id: `${item.id || i}`,
            })),
        });
    }
    render() {
        
        let { overviewStore: { panelDatas, list, listView: { data } }, match: { url }, history: { replace } } = this.props;
        const newPath = url.substr(0, url.lastIndexOf('/'));
        const tabs = [
            { title: '我的事项' },
            { title: '我的任务' },
        ];
       
        return (
            <div>
                <Overview datas={panelDatas} hasheader={true} headerTitle='我的督办' className='panel' store={this.props.overviewStore}/>
                <div className='gv-home-list'>
                    <Header title='最新任务' />
                    <Normal template={template} store={list}
                        onRowClick={(item) => this.props.history.push(`/task/task/info/content?id=${item.id}`)}
                    />
                    {/* <MainListPage listViewStore= {listView}/> */}
                </div>
            </div>
        )
    }
}

export default class HomePage extends React.Component {
    render() {
        return (
            <div className='govern-home' style={{ backgroundColor: '#fcfcfc', height: '100vh' }}>
                {false && <SelfTab />}
                <PanelBox />
                <Overview datas={result2} className='shortcut-btn' />
            </div>
        )
    }
}

